<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>列表排序</title>
</head>
<body>
    <!-- 
        Vue监视数据的原理：
        1、vue会监视data中的所有层次的数据
        2、如何检测对象中的数据？
            通过setter实现监视，且要在new Vue时就传入要监视的数据
            （1）对象中追加属性，Vue默认不做响应式处理
            （2）如需给后添加的属性做响应式，请使用如下API：
                Vue.set(target, propertyName/index, value)
                vm.$set(target, propertyName/index, value)
        3、如何检测数组中的数据？
            通过包裹数组更新元素的方法实现，本质就做了两件事：
                （1）调用原生对应的方法对数据进行更新
                （2）重新解析模板，进而更新页面
        4、在Vue修改数组中的某个元素一定要用如下方法：
            1、使用这些API：push() pop() shift() unshift() splice() sort() reverse()
            2、Vue.set() 或 vm.$set
            特别注意： Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性！！！
     -->
    <div id="root"> 
        <button @click="addAge">年龄+1岁</button><br/>
        <button @click="setSex">添加性别属性，默认值：男</button><br/>
        <button @click="addFriend">在列表首位添加一个朋友</button><br/>
        <button @click="changeOneFriend">修改第一个朋友的名字为：Jerry</button><br/>
        <button @click="addHobby">添加一个爱好</button><br/>
        <button @click="changeFirstHobby">修改第一个爱好为：开车</button><br/>

        <h2>学生信息</h2>
        <h3>姓名：</h3>{{student.name}}<br/>
        <h3>年龄：</h3>{{student.age}}<br/>
        <h3>爱好：</h3>
        <li v-for="hobby in student.hobbies">
            {{hobby}}
        </li>
        <br/>
        <h3>朋友们：</h3>
        <li v-for="friend in student.friends">
            {{friend.name}}--{{friend.age}}
        </li>

    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    school:{
                        name:'SDU',
                        address:'Jinan'
                    },
                    student:{
                        name:"Joe",
                        age: 25,
                        hobbies:['抽烟','喝酒','烫头'],
                        friends:[
                            {
                                name: 'jerry',
                                age: '10'
                            },
                            {
                                name: 'tom',
                                age: '10'
                            }
                        ]
                    }
                }
            },
            methods:{
                addAge(){
                    this.student.age += 1
                },
                setSex(){
                    //Vue.set(this.student, 'sex', '男')
                    this.$set(this.student,'sex','男')
                },
                addFriend(){
                    this.student.friends.unshift({name:'Aurora',age:'25'})
                },
                changeOneFriend(){
                    this.student.friends[0].name="Jerry"
                },
                addHobby(){
                    this.student.hobbies.push('pc')
                },
                changeFirstHobby(){
                    this.student.hobbies[0]="开车"//直接修改不生效
                    // this.student.hobbies.splice(0,1,"开车")
                    Vue.set(this.student.hobbies, 0, '开车')
                }

            }
        })
    </script>
</body>
</html>